<template>
    <div class="resourcesList">
        <div class="resources" :class="{ 'selected': resources.resourceId == selectResource }" v-for="resources in resourcesList"  @click="select(resources.resourceId)">
            <div class="resourcesContent">
                <div class="resourcesInformation">
                    <span class="userAvatar">
                        <img :src="resources.uploadUser?.avatarPath ? (baseUrl + resources.uploadUser?.avatarPath ) :''" alt="">
                    </span>
                    <span class="resourcesText">
                        <div class="resourcesName">{{resources.resourceName}}</div>
                        <div class="userName">{{ resources.uploadUser?.nickName ? resources.uploadUser?.nickName : '' }}</div>
                    </span>
                </div>
                <div class="resourcesLabel">
                    <span class="iconfont icon-likesprogramclip"></span>
                    共 <span class="fileNumber">{{ resources.fileCount }}</span> 个文件
                </div>
            </div>
            <!-- 数据 -->
            <div class="resourcesData">
                <!-- 上传时间 -->
                <span class="uploadTime">{{ resources.updateDate }}</span>
                <span class="downloadNumberBox">
                    <span>下载次数:</span>
                    <span class="downloadNumber">{{ resources.downloadCount }}</span>
                </span>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { CourseResource } from '@/types/Course';
import { defineComponent, watch, ref } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { baseUrl } from '@/util/request';

export default defineComponent({
    name: 'resourcesList',
});
</script>

<script setup lang="ts">
    // 定义props
    const props = withDefaults(defineProps<{
        modelValue: CourseResource[];
        joinCourse: () => Promise<boolean>;
        permission: number;
    }>(), {
        modelValue: ()=>[],
        joinCourse: null,
        permission: 0
    });

    
    const router = useRouter();     // 获取路由实例
    // const { params } = useRoute();  // 获取路由参数
    const courseId = ref(0); // 获取 课程Id 参数
    
    const route = useRoute();

    console.log(courseId.value);


    const selectResource = ref(Array.isArray(route.query.resourceId) 
    ? parseInt(route.query.resourceId[0], 10) || 0
    : parseInt(route.query.resourceId as string, 10) || 0); // 获取资源Id参数
    
    const resourcesList = ref(null);

    const select = async (resourceId: number) => {
        selectResource.value = resourceId;
        if (props.joinCourse)
        {
            if (props.permission > 0) router.push({
                path: `/course/courseContent/${courseId.value}/courseContentResources`,
                query: { resourceId: selectResource.value }
            });
            else {
                const success = await props.joinCourse();
                if(success) router.push({
                    path: `/course/courseContent/${courseId.value}/courseContentResources`,
                    query: { resourceId: selectResource.value }
                });
            }
        }
        else router.push({
            path: `/course/courseContent/${courseId.value}/courseContentResources`,
            query: { resourceId: selectResource.value }
        });
    };

    // 参数转换函数（确保字符串转换为数字）
    const parseSafeInt = (value: string | string[] | undefined): number | undefined => {
        if (typeof value === 'string') {
            const num = parseInt(value, 10);
            return isNaN(num) ? undefined : num;
        }
        return undefined;
    };
    watch(() => ({
        modelValueParam: props.modelValue,
        // permissionParam: props.permission,
        chourseIdParam: route.params.courseId
    }), async ({modelValueParam, chourseIdParam}) => {
        if(modelValueParam) resourcesList.value = modelValueParam;
        if(chourseIdParam) courseId.value = parseSafeInt(chourseIdParam);
    },
    { immediate: true });
</script>

<style src="@/assets/icons/iconfont.css" scoped></style>

<style scoped>
.resourcesList {
    width: 100%;
    position: relative;
}

.resourcesList .resources {
    width: 100%;
    position: relative;
    padding: 5px 10px;
    padding-top: 10px;
    transition: .3s all;
    border-radius: 5px;
    border-bottom: 1px solid rgba(218, 218, 218, .6);
}
.resourcesList .resources:hover {
    background-color: rgba(200, 200, 255, .2);
    border-bottom: 1px solid rgba(65, 185, 255, 1);
}
.resourcesList .resources:active {
    transition: .1s all;
    background-color: rgba(200, 200, 255, .3);
    border-bottom: 1px solid rgba(65, 185, 255, .5);
}
.resourcesList .resources.selected {
    background-color: rgba(200, 200, 255, .3);
    border-bottom: 1px solid rgba(65, 185, 255, 1);
}

/* 内容框 */
.resourcesList .resources .resourcesContent {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* 资源标签 */
.resourcesList .resources .resourcesContent .resourcesLabel {
    position: absolute;
    font-size: 14px;
    display: flex;
    right: 0px;
    align-items: center;
    justify-content: flex-end;
}
.resourcesList .resources:hover .resourcesLabel {
    color: rgba(65, 185, 255, 1);
}
.resourcesList .resources.selected .resourcesLabel {
    color: rgba(65, 185, 255, 1);
}
.resourcesList .resources .resourcesContent .resourcesLabel .iconfont {
    font-size: 20px;
    padding-right: 5px;
}
.resourcesList .resources .resourcesContent .resourcesLabel .fileNumber {
    padding: 0px 3px;
    color: rgba(65, 185, 255, 1);
}
/* 资源信息 */
.resourcesList .resources .resourcesContent .resourcesInformation {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
/* 头像 */
.resourcesList .resources .resourcesContent .userAvatar {
    display: inline-block;
    width: 45px;
    height: 45px;
    border: 2px solid rgba(100, 100, 100, .5);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s all;
}
.resourcesList .resources:hover .resourcesContent .userAvatar {
    border: 2px solid rgba(65, 185, 255, 1);
}
.resourcesList .resources.selected .resourcesContent .userAvatar {
    border: 2px solid rgba(65, 185, 255, 1);
}
.resourcesList .resources:active .resourcesContent .userAvatar {
    transition: .1s all;
    border: 2px solid rgba(65, 185, 255, .8);
}
.resourcesList .resources .resourcesContent .userAvatar img {
    width: 100%;
    height: 100%;
}

/* 信息内容 */
.resourcesList .resources .resourcesContent .resourcesText {
    padding-left: 10px;
}
.resourcesList .resources .resourcesContent .resourcesText .resourcesName {
    font-size: 16px;
    color: rgba(0, 0, 0, 1);
}
.resourcesList .resources .resourcesContent .resourcesText .userName {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.8);
}

/* 数据 */
.resourcesList .resources .resourcesData {
    font-size: 12px;
    padding-top: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.resourcesList .resources .resourcesData .downloadNumber {
    padding-left: 5px;
}
</style>
